<template>
    <div>   
        <button @click="showfunc()">显示课程信息</button> 
        <button @click="hidefunc()">隐藏课程信息</button>
        <table v-show="control">
            <tr>
                <td>学期</td>
                <td>课程</td>
            </tr>
            <tr v-for="(item,index) in arr" :key="index">
                <td>{{item.term}}</td>
                <td>{{item.course}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    name:"Ji",
    data(){
        return{
           control:false,
           arr:[
              {term:1,course:"《网页设计》"},
              {term:2,course:"《网络UI》"}, 
              {term:3,course:"《微信小程序》"}, 
              {term:4,course:"《web》"}, 
              {term:5,course:"《python》"},  
           ]
        }
    },
    methods:{
        showfunc(){
            this.control=true
        },
        hidefunc(){
            this.control=false
        }
    }
}
</script>

<style scoped>
/*
tr,td{
    border: 1px solid blue;
};
*/
table{
     border-collapse: collapse;/* 边框合并属性  */
	 width:300px;
}
tr{
     border: 1px solid red;
}
td{
     border: 1px solid red;
};
</style>